﻿<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html" ; charset="utf-8" />
    <title>教务信息查询</title>
    <link href="../../../css/main.css" rel="stylesheet" type="text/css" />
    <link
      href="../../../bstable/css/bootstrap.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="../../../bstable/css/bootstrap-table.css"
      rel="stylesheet"
      type="text/css"
    />
    <link href="../../../css/new.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div style="padding: 20px">
      <div class="p_line text_ient lx-row ptb10">
        <div class="col" style="display: flex;">
          <a class="find_a" style="white-space: nowrap;">缴费凭证<span style="color: red;">(只能上传jpeg/jpg/png文件，且不超过500kb)</span>：</a>
          <p class="img-con front-con">
            <img src="" />
            <b class="del-img">❌</b>
          </p>
          <input id="jiaofei" type="file" class="input-file" accept="image/*" />
        </div>
      </div>
      <div class="p_line text_ient lx-row ptb10">
        <div class="col" style="display: flex;">
          <a class="find_a" style="white-space: nowrap;">优惠凭证<span style="color: red;">(只能上传jpeg/jpg/png文件，且不超过500kb)</span>：</a>
          <p class="img-con front-con">
            <img src="" />
            <b class="del-img">❌</b>
          </p>
          <input id="youhui" type="file" class="input-file" accept="image/*" />
        </div>
      </div>
      <div class="p_line text_ient lx-row ptb10">
        <div class="col" style="display: flex;">
          <a class="find_a" style="white-space: nowrap;">其他证明<span style="color: red;">(只能上传jpeg/jpg/png文件，且不超过500kb)</span>：</a>
          <p class="img-con front-con">
            <img src="" />
            <b class="del-img">❌</b>
          </p>
          <input id="qita" type="file" class="input-file" accept="image/*" />
        </div>
      </div>
      <div>
        <input
          type="button"
          value="上传"
          class="but_find"
          id="upload"
          style="width: 60px; margin: 20px 0 0 97px"
        />
      </div>
    </div>

    <div class="big-img" style="display: none">
      <img src="" alt="" />
    </div>

    <script src="../../../js/jquery.js"></script>
    <script src="../../../js/common.js"></script>
    <script src="../../../layer_v2.1/layer/layer.js"></script>
    <script src="../../../js/laydate-master/laydate.js"></script>
    <script src="../../../bstable/js/bootstrap.min.js"></script>
    <script src="../../../bstable/js/bootstrap-table.js"></script>
    <script src="../../../bstable/js/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript">
      function bigShow(src) {
        $('.big-img img').attr('src', src);
        $('.big-img').show();
      }
      $('.big-img').on('click', function () {
        $('.big-img').hide();
      });

      if (getQuery('from') === 'student') {
        localStorage.setItem('name', '学生管理/学生信息查询/凭证上传');
      } else if (getQuery('from') === 'fenqi') {
        localStorage.setItem('name', '学生管理/分期缴费信息查询/凭证上传');
      }

      function getQuery(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split('&');
        for (var i = 0; i < vars.length; i++) {
          var pair = vars[i].split('=');
          if (pair[0] == variable) {
            return pair[1];
          }
        }
        return false;
      }
      var idNo = getQuery('idNo');
      var trainType = getQuery('trainType');
      // getUserInfo()
      function getUserInfo() {
        $.ajax({
          url: baseUrl + 'studentInfo/getStudentInfo',
          method: 'get',
          headers: {
            Authorization: JSON.parse(localStorage.getItem('userInfo')).token,
          },
          data: {
            trainType,
            idNo,
          },
          success: function (data) {
            var cards = data.studentCards;
            var maps = ['jiaofei', 'youhui', 'qita'];
            cards.forEach(function (item) {
              if (maps.includes(item.property)) {
                $('#' + item.property).hide();
                $('#' + item.property)
                  .siblings('p')
                  .css('display', 'inline-block')
                  .find('img')
                  .attr(
                    'src',
                    baseUrl +
                      'studentInfo/picDownload?url=' +
                      encodeURIComponent(item.fileResource)
                  );
              }
            });
          },
        });
      }

      $('.input-file').on('change', function (event) {
        const input = event.target;
        const file = input.files[0]; // Get the selected file

        if (file) {
          const maxSizeInBytes = 500 * 1024; // 5 MB
          if (file.size > maxSizeInBytes) {
            alert('文件大小超过限制（最大500kb）');
            input.value = '';
            $(this).siblings('img').attr('src', '');
            $(this).parents('.img-con').hide().siblings('.input-file').show();
            $(this).parents('.img-con').siblings('.input-file')[0].value = '';
            return;
          }
        }
        var files = this.files;
        var id = $(this).attr('id');
        if (files.length) {
          $(this).hide();
          $(this).siblings('.img-con').css('display', 'inline-block');
          drawImg($(this).siblings('.img-con').find('img'), files[0]);
        }
      });
      $('.del-img').on('click', function () {
        $(this).siblings('img').attr('src', '');
        $(this).parents('.img-con').hide().siblings('.input-file').show();
        $(this).parents('.img-con').siblings('.input-file')[0].value = '';
      });
      function drawImg($el, file) {
        var URL = window.URL || window.webkitURL;
        var imgUrl = URL.createObjectURL(file);
        $el.attr('src', imgUrl);
      }

      var studentId = getQuery('id');
      var userId = JSON.parse(localStorage.getItem('userInfo')).userId;
      $('#upload').on('click', function () {
        var files = [];
        $('.input-file').each(function (index) {
          if (this.files.length) {
            files.push({
              file: this.files[0],
              key: $(this).attr('id'),
            });
          }
        });

        var flag = false;
        $('.img-con img').each(function (item) {
          if ($(this).attr('src')) {
            flag = true;
          }
        });

        if (!files.length && !flag) {
          alert('请至少选择一种凭证');
          return;
        }
        // 更新
        if (!files.length && flag) {
          return postAjax();
        }
        var i = 0;
        // files.forEach(function(file) {
        var formData = new FormData();
        formData.append('trainType', trainType);
        formData.append('studentId', studentId);
        formData.append('studyId', getQuery('studyId'));
        formData.append('userId', userId);
        files.forEach(function (item, index) {
          formData.append('propertys', item.key);
          formData.append('files', item.file);
          //   formData.append("studentId", studentId);
          //   formData.append("studyId", getQuery("studyId"));
          //   formData.append("userId", userId);
        });
        $.ajax({
          url: baseUrl + 'studentInfo/uploadStuCertificate',
          method: 'post',
          data: formData,
          headers: {
            Authorization: JSON.parse(localStorage.getItem('userInfo')).token,
          },
          processData: false,
          contentType: false,
          mimeType: 'multipart/form-data',
          success: function (data) {
            postAjax();
          },
        });
        // })
      });

      function postAjax() {
        $.ajax({
          url: baseUrl + 'studentInfo/addPz',
          method: 'post',
          data: {
            studentId: studentId,
            userId: userId,
            commitFlag: 2,
            studyId: getQuery('studyId'),
          },
          headers: {
            Authorization: JSON.parse(localStorage.getItem('userInfo')).token,
          },
          success: function (data) {
            alert('上传成功');
            if (getQuery('from') === 'student') {
              location.href = './studentSearch.html';
            } else if (getQuery('from') === 'fenqi') {
              location.href = './paySearch.html';
            }
          },
        });
      }

      $('.img-con img').on('click', function () {
        var src = $(this).attr('src');
        if (src.endsWith('pdf')) {
          src = encodeURIComponent(location.origin + src);
          window.open('../../pdf/web/viewer.html?file=' + src);
        } else {
          bigShow(src);
        }
      });
    </script>
  </body>
</html>
<!-- 
layer.photos({
    photos: json //格式见API文档手册页
    ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
  }); -->
